<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>
<body>
    <!-- 整体 -->
    <div class="warp">
        <!-- 头部 -->
        <header>
            <!-- 头部图标 -->
            <div class="logo"><img class="logo_img" src="./img/LOGO.png" alt=""></div>
            <!-- 搜索框 -->
            <div class="search_box">
                <input class="search" type="search" placeholder="请输入商品名称">
                <i class="iconfont icon-fangdajing search_icon"></i>
            </div>
            <!-- 右侧城市下拉框 -->
            <div class="city_box">
                <select name="城市" id="">
                <option value="广东省">广州市</option>
                <option value="广东省">深圳市</option>
                <option value="广东省">清远市</option>
                <option value="广东省">东莞市</option>
                </select>
                <i class="iconfont icon-xialajiantou drop_icon"></i>
        </div>
        </header>
        <main>
            <!-- 轮播图 -->
            <div class="banner">
                    <div class="banner_window">
                        <div class="banner_img1 ban_bg"><img src="./img/bg_two.png" alt=""></div>
                        <div class="banner_img2 ban_bg"><img src="./img/bg_one.png" alt=""></div>
                        <div class="banner_img3 ban_bg"><img src="./img/bg_three.png" alt=""></div>
                      </div>
                    <!-- 滚动条 -->
                    <div class="progress_bar"></div>
            </div>
            <!-- 优惠团购 -->
            <div class="discount">
                <!-- 内容标题 -->
                <div class="infotitle">
                    <div class="infotitle_left"><img src="./img/flower_logo.png" alt=""><span>优惠团购</span></div>
                    <div class="infotitle_right">
                          <a href="#">
                            <span>更多</span>
                            <!-- 右箭头 -->
                            <i class="iconfont icon-youjiantou_huaban right_icon"></i>
                          </a>
                </div>
            </div>
            <!-- 团购优惠内容 -->
                <div class="discount_list">
                    <div class="discount_cont"><img src="./img/discount_1.png" alt=""></div>
                    <div class="discount_cont"><img src="./img/discount2.png" alt=""></div>
                    <div class="discount_cont"><img src="./img/discount3.png" alt=""></div>
                    <div class="discount_cont"><img src="./img/discount4.png" alt=""></div>
                </div>
                </div>
                <!-- 猜你喜欢 -->
                <div class="like_more">
                    <div class="infotitle">
                        <div class="infotitle_left">
                            <img src="./img/heart.png" alt="">
                            <span>猜你喜欢</span>
                        </div>
                        <div class="infotitle_right">
                              <a href="#">
                                <span>更多</span>
                                <i class="iconfont icon-youjiantou_huaban right_icon"></i>
                              </a>
                    </div>
                </div>
                <!-- 食物内容区 -->
                <div class="food_list">
                    <!-- 内容区容器 -->
                    <div class="food_box">
                        <div class="foodinfo_left"><img src="./img/shousi.png" alt=""></div>
                        <div class="foodinfo_mid">
                            <p><a href="./product_info.html">万岁寿司&nbsp;（正佳店）</a></p>
                            <p>[100店通用]&nbsp;双人套餐</p>
                            <p>￥88.88</p>
                        </div>
                        <div class="foodinfo_right">
                            <p>&lt;100m</p>
                            <p>已售1000</p>
                        </div>
                    </div>
                    <div class="food_box">
                        <div class="foodinfo_left"><img src="./img/duck.png" alt=""></div>
                        <div class="foodinfo_mid">
                            <p><a href="./product_info.html">周黑鸭&nbsp;（正佳店）</a></p>
                            <p>[100店通用]&nbsp;双人套餐</p>
                            <p>￥88.88</p>
                        </div>
                        <div class="foodinfo_right">
                            <p>&lt;100m</p>
                            <p>已售1000</p>
                        </div>
                    </div>                    
                    <div class="food_box">
                        <div class="foodinfo_left"><img src="./img/shousi.png" alt=""></div>
                        <div class="foodinfo_mid">
                            <p><a href="./product_info.html">万岁寿司（正佳店）</a></p>
                            <p>[100店通用]&nbsp;双人套餐</p>
                            <p>￥88.88</p>
                        </div>
                        <div class="foodinfo_right">
                            <p>&lt;100m</p>
                            <p>已售1000</p>
                        </div>
                    </div>
                    <div class="food_box">
                        <div class="foodinfo_left"><img src="./img/duck.png" alt=""></div>
                        <div class="foodinfo_mid">
                            <p><a href="./product_info.html">周黑鸭&nbsp;（正佳店）</a></p>
                            <p>[100店通用]&nbsp;双人套餐</p>
                            <p>￥88.88</p>
                        </div>
                        <div class="foodinfo_right">
                            <p>&lt;100m</p>
                            <p>已售1000</p>
                        </div>
                    </div> 
                </div>
            </div>
        </main>
        <footer>
        <div class="navb_list">
            <div class="nav_box">
                <p><a href="./index.html"><i class="iconfont icon-shouye1 shouye_icon"></i></a></p>
                <p>首页</p>
            </div>
            <div class="nav_box">
                <p><a href="./classification.html"><i class="iconfont icon-fenlei classification_icon"></i></a></p>
                <p>分类</p>
            </div>
            <div class="nav_box">
                <p><a href="./find.html"><i class="iconfont icon-21 find_icon"></i></a></p>
                <p>发现</p>
            </div>
            <div class="nav_box">
                <p><a href="./mine.html"><i class="iconfont icon-shouye_wodehui mine_icon"></i></a></p>
                <p>我的</p>
            </div>
       </div>
        </footer>
    </div>
</body>
</html>